草庐IT

CSS3 多媒体查询

全部标签

javascript - Angular ui-router动态查询字符串定义

我们有一个搜索页面,我们有数千个可以由管理面板定义的搜索属性。一个特征搜索结果页面有这样一个url:http://example.com/search?a12=3213&a314=412412&a247=1941829&....当我们想通过使用angular-ui-router将该页面实现为AngularJS的SPA时,我无法理解,我们如何定义该路由配置以及我们如何读取所有搜索来自查询字符串的参数。因为ui-router强制定义路由配置中的每个查询参数可能性,以便在$stateParams中使用它们。$stateProvider.state('search',{url:'/search

javascript - 如果不查询宽度属性,过渡就不起作用

我想通过向js中的div添加一个类来为点击事件上的translateX设置动画。transform和transition属性添加到css文件中。varwidget=document.getElementById('widget');widget.style.display='block';document.getElementById('widget2').clientWidth;//commentthislineoutanditwontworkwidget.className='visible';只有当我在添加类之前查询dom中任何元素的宽度属性时,它才有效。这是一个jsfiddle

javascript - 隐藏元素时是否禁用 CSS3 转换?

我注意到(在Chrome43中使用jQuery)当元素有display:none时,转换被禁用。这种在所有浏览器上的标准化行为是jQuery的一个特性,还是生产中不能依赖的东西?当要在延迟函数中更改动画的CSS语句时,将启用转换。TakealookatthisJSFiddle.取消注释第3行或6以自行查看。解决方案:在生产中不能依赖此行为,因为它似乎是优化/设计选择而非规范的产物(根据@AndriyHorens的回答)。相反,您应该使用类打开和关闭动画(transition-property:none)。在Chrome43中,未能使用某个类使它对我来说不可靠。Chrome确实还需要单独

javascript - CSS随机动画

我的想法是制作一个图像,将其分解成小的部分,这些部分会在飞走时按比例缩小。我已经成功地使用了几个CSS动画-scale+translate3d-(结果不是很好,但这是一个开始)。现在,问题是我希望翻译是随机的。据我所知,有一种涉及JS/Jquery/GSAP的简单方法,还有一种涉及SCSS/Sass的更复杂的方法...我对他们都不熟悉。我找到了一个使用javascript来随机旋转的代码,并且我已将其改编为我的翻译。代码已发布here作为答案。//searchtheCSSOMforaspecific-webkit-keyframerulefunctionfindKeyframesRul

javascript - CSS 和 javascript 中的 (Chromium) alpha 颜色值(在 rgba 中)

如果我在javascript中通过rgba(r,g,b,a)将alpha值设置为1以外的任何值,则浏览器设置的实际值会略有不同。但是CSS中设置的值是完全匹配的。请参阅中的代码示例code-pen-sitewindow.onload=function(){document.getElementById("p1").style["background-color"]="rgba(255,0,0,0.3)";}RGBcolorswithopacity:RedGreen使用Chromium浏览器按F12激活检查器检查“红色”。“红色”的背景颜色设置为rgba(255,0,0,0.3),但在I

javascript - 未检测到查询参数的更改

我在正确同步我的过滤器时遇到了问题。我订阅ActivatedRoute的queryParams。我得到了query和我的三个过滤条件。ngOnInit(){this.route.queryParams.subscribe(queryParams=>{this._query=queryParams['query'];this._heightFilter=queryParams['height'];this._colourFilter=queryParams['colour'];this._weightFilter=queryParams['weight'];//Dosomerequest

javascript - 你如何从 getInitialProps 中的 url 获取查询参数?

我有一个干净的url,其中包含一些这样的查询参数。http://localhost:3000/post/:id我正在尝试像这样在客户端捕获查询参数“id”。staticasyncgetInitialProps({req,query:{id}}){return{postId:id}}render(){constprops={data:{'id':this.props.postId//thisqueryparamisundefined}}return(Acomponent)}我的express端点如下所示。app.post('/post/:id',(req,res,next)=>{letd

javascript - 如何仅使用 CSS3 将动态创建的元素平滑地添加到 DOM 中?

我的需求很简单,但我找不到合适的解决方案。我创建元素并将它们作为元素列表添加到DOM,每个新元素都在旧元素之前添加。我希望“顺利”添加新元素。每个元素的高度是动态的,因此必须符合CSS规则。我想我必须使用CSSanimations和keyframes,据我所知我不能使用transitions因为有时itisnotrenderedbythebrowser.我不想使用Javascript,所以我更愿意避免使用setTimeout()或jQuery的解决方案。我确信这可以使用现代CSS正确完成,但我仍然需要找到正确的方法。我有一个解决方案的开始(见下文),但是仍然有max-height:10

javascript - GraphQL 能否在解析器中选择性地解析给定查询结果的字段?

我有以下REST端点:/orders/{id}returns{orderId,orderItem,customerId}/customers/{id}returns{customerId,firstName,lastName}我受限于这两个端点,它们将被包装在我的graphql模式中。我想要以下架构:typeOrder{orderId:ID!,orderItem:String,customer:Customer}typeCustomer{customerId:ID!firstName:String!lastName:String!}typeQuery{getOrder(id:Strin

javascript - CSS 谷歌地图自定义信息窗口

我一直在使用来自http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/infowindow-custom.html的代码,这是目前谷歌关于如何在MapsAPIv3中创建自定义InfoWindow的最佳示例。我一直在研究它,到目前为止我已经接近工作了,除了一件事,它是div容器,文本内容不会扩展以适应内容,所以它只是掉落而不是扩大气泡。如果我给内容容器一个固定的像素宽度,它可以正常工作,但我无法根据其中的文本量来扩展它。我已经在这个问题上停留了一段时间。任何帮助将不胜感激!这是HTML页面Gayborhood